<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const transitionName = ref('')
const router = useRouter()
router.beforeEach((to, from) => {

  //如果是进详情页
  if (to.path === '/login' || to.path === '/profile') {
    // 执行：进栈
    stack.value.push(to.fullPath)
    transitionName.value = 'push'
  } else if (to.path === '/') {
    // 执行：出栈
    stack.value.pop()
    transitionName.value = 'back'
  }
  

  // 如果是返回
  // 执行：出栈
  // 如果PC端
  // 正常跳转
})
const stack = ref([])
</script>

<template>
  <router-view v-slot="{ Component }">
    <transition :name="transitionName">
      <div>
        <keep-alive :include="stack">
          <component :is="Component" />
        </keep-alive>
      </div>
    </transition>
  </router-view>
  <!-- @before-enter="beforeEnter"
  @after-leave="afterLeave" -->
</template>

<style lang="scss" scoped>
// push页面时：新页面的进入动画
.push-enter-active {
  animation-name: push-in;
  animation-duration: 0.4s;
}
// push页面时：老页面的退出动画
.push-leave-active {
  animation-name: push-out;
  animation-duration: 0.4s;
}
// push页面时：新页面的进入动画
@keyframes push-in {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
// push页面时：老页面的退出动画
@keyframes push-out {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

// 后退页面时：即将展示的页面动画
.back-enter-active {
  animation-name: back-in;
  animation-duration: 0.4s;
}
// 后退页面时：后退的页面执行的动画
.back-leave-active {
  animation-name: back-out;
  animation-duration: 0.4s;
}
// 后退页面时：即将展示的页面动画
@keyframes back-in {
  0% {
    width: 100%;
    transform: translate(-100%, 0);
  }
  100% {
    width: 100%;
    transform: translate(0, 0);
  }
}
// 后退页面时：后退的页面执行的动画
@keyframes back-out {
  0% {
    width: 100%;
    transform: translate(0, 0);
  }
  100% {
    width: 100%;
    transform: translate(50%, 0);
  }
}
</style>
